<template>
  <Card 
    :hover="true"
    class="text-center p-6 transition-colors duration-200 hover:bg-gray-200 hover:shadow-lg cursor-pointer"
  >
    <div :class="iconClasses">
      <component :is="icon" class="w-8 h-8 text-white" />
    </div>
    <h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
    <p class="text-gray-600">{{ description }}</p>
  </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Component } from 'vue'
import Card from '@/components/ui/Card.vue'

interface Props {
  icon: Component | string
  title: string
  description: string
  color?: 'blue' | 'green' | 'purple' | 'red' | 'yellow' | 'gray'
}

const props = withDefaults(defineProps<Props>(), {
  color: 'blue'
})

const iconClasses = computed(() => {
  const baseClasses = 'w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4'
  
  const colorClasses = {
    blue: 'bg-blue-100',
    green: 'bg-green-100',
    purple: 'bg-purple-100',
    red: 'bg-red-100',
    yellow: 'bg-yellow-100',
    gray: 'bg-gray-100'
  }
  
  return [baseClasses, colorClasses[props.color]].join(' ')
})
</script>
